<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
 <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
 <meta name="Generator" content="Xara HTML filter v.7.0.2.946"/>
 <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
 <title>exporting animations as images or gifs</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <script language="JavaScript" type="text/javascript">document.documentElement.className="xr_bgh22";</script>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/custom_styles.css"/>
 <script type="text/javascript" src="index_htm_files/roe.js"></script>
</head>
<body class="xr_bgb22">
<div class="xr_ap" id="xr_xr" style="width: 760px; height: 1829px; top:0px; left:50%; margin-left: -380px;">
 <script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<div id="xr_td" class="xr_td">
<div class="xr_ap xr_xri_" style="width: 760px; height: 1829px;">
 <span class="xr_ar" style="left: -564px; top: 1764px; width: 1900px; height: 65px; background-color: #2F7FAC;"></span>
 <div class="xr_s1" style="position: absolute; left:36px; top:189px; width:687px; height:320px;">
  <span class="xr_tl xr_s1" style="top: -14px;">Ideally you&#8217;ll be able to use your tweened and optimized Spriter animations directly in the game authoring </span>
  <span class="xr_tl xr_s1" style="top: 3px;">system of your choice, but obviously this can&#8217;t always be the case.&nbsp; Sometimes you&#8217;ll need to create </span>
  <span class="xr_tl xr_s1" style="top: 21px;">animations for a game engine that can&#8217;t support Spriter files directly.</span>
  <span class="xr_tl xr_s1" style="top: 57px;">Similarly, sometimes you might create an animation for things like explosions which end up using dozens </span>
  <span class="xr_tl xr_s1" style="top: 74px;">of tweened, rotating and scaling images at once, but plastering your game-screen with lots of these </span>
  <span class="xr_tl xr_s1" style="top: 92px;">explosions might adversly effect your frame-rate.&nbsp; Therefore it would be better for your game if the </span>
  <span class="xr_tl xr_s1" style="top: 110px;">explosion could be converted to just a sequence of full frame images (to reduce the need for all the </span>
  <span class="xr_tl xr_s1" style="top: 127px;">seperate draws and tweening calculations).</span>
  <span class="xr_tl xr_s1" style="top: 163px;">For these types of circumstances, Spriter lets you export finished animations as sequential images at any </span>
  <span class="xr_tl xr_s1" style="top: 181px;">frame rate (number of frame images per second) you&#8217;d like.</span>
  <span class="xr_tl xr_s1" style="top: 216px;">Here&#8217;s how:</span>
  <span class="xr_tl xr_s1" style="left: 225px; top: 252px;">1) Once your animation is finished, make sure that animation is </span>
  <span class="xr_tl xr_s1" style="left: 225px; top: 269px;">selected in the Animations Palette and then from Spriter&#8217;s menu choose </span>
  <span class="xr_tl xr_s1" style="left: 225px; top: 287px;">File/Export To PNG.</span>
 </div>
 <div class="xr_s4" style="position: absolute; left:202px; top:128px; width:10px; height:10px;">
  <span class="xr_tl xr_s4" style="top: -14px;">Exporting Animations as Sequential Images or GIFs</span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 71px; width: 1900px; height: 24px; background-color: #2F7FAC;"></span>
 </a>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar xr_t21270" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 0px; width: 1900px; height: 70px; background-color: #5DABD7; -o-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -webkit-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -ms-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); transform: matrix(1.000,-0.000,0.000,-1.000,0,0);"></span>
 <!--[if lt IE 9]><style type="text/css">.xr_t21270 {margin-left:0px; margin-top:0px;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.000,M21=-0.000,M12=0.000,M22=-1.000,sizingMethod='auto expand')}</style><![endif]-->
 </a>
 <div class="Heading_1" style="position: absolute; left:174px; top:47px; width:10px; height:10px;font-size:21px;color:#FFFFFF;">
  <h1 class="xr_tl Heading_1" style="top: -29px;font-size:21px;color:#FFFFFF;margin:0;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="font-size:32px;color:#FFFFFF;">Spriter Pro</span></a><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="color:#FFFFFF;">&nbsp;User&#8217;s Manual version 1.0</span></a></h1>
 </div>
 <div class="xr_s2" style="position: absolute; left:243px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -50px; top: -11px; width: 100px;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Quickstart</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:350px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -35px; top: -11px; width: 69px;"><a href="default%20pivot%20points.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Sprites</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:441px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -31px; top: -11px; width: 63px;"><a href="creating%20and%20assigning%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Bones</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:543px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -49px; top: -11px; width: 98px;"><a href="animating%20sprites%20and%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Animating</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:679px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -79px; top: -11px; width: 157px;"><a href="what%20are%20character%20maps.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Character Maps</span></a></span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/196.jpg" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 8px; top: 1px; width: 93px; height: 93px;"/>
 </a>
 <div class="xr_s2" style="position: absolute; left:132px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -27px; top: -11px; width: 54px;"><a href="index.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Index</span></a></span>
 </div>
 <a href="activating%20and%20stacking%20character%20maps.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/197.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <a href="activating%20and%20stacking%20character%20maps.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/198.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 1713px; width: 34px; height: 34px;"/>
 </a>
 <a href="adding%20variables%20to%20an%20animation.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/199.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 1713px; width: 34px; height: 34px;"/>
 </a>
 <div class="xr_s1" style="position: absolute; left:36px; top:542px; width:678px; height:80px;">
  <span class="xr_tl xr_s1" style="left: 225px; top: -14px;">2) A file selector will appear, allowing you to designate the location </span>
  <span class="xr_tl xr_s1" style="left: 225px; top: 3px;">and name for the images to be saved.&nbsp; Navigate to or create the folder </span>
  <span class="xr_tl xr_s1" style="left: 225px; top: 21px;">you&#8217;d like the images to be saved in and then type the name for the </span>
  <span class="xr_tl xr_s1" style="left: 225px; top: 39px;">images and press enter or click on the save button.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:63px; top:917px; width:677px; height:231px;">
  <span class="xr_tl xr_s1" style="left: 340px; top: -14px;">3) The Export Keyframes To PNG Dialogue box </span>
  <span class="xr_tl xr_s1" style="left: 340px; top: 3px;">will appear, giving you a plethora of options to </span>
  <span class="xr_tl xr_s1" style="left: 340px; top: 21px;">choose from while exporting your animation as </span>
  <span class="xr_tl xr_s1" style="left: 340px; top: 39px;">sequential images.&nbsp; First, decide if you want to only </span>
  <span class="xr_tl xr_s1" style="left: 340px; top: 57px;">export the keyframes themselves, if you&#8217;d like to </span>
  <span class="xr_tl xr_s1" style="left: 340px; top: 74px;">export frames based on a specific number of frames </span>
  <span class="xr_tl xr_s1" style="left: 340px; top: 92px;">per second, or if you&#8217;d lust like to tell Spriter how </span>
  <span class="xr_tl xr_s1" style="left: 340px; top: 110px;">many frames total the export should create for the </span>
  <span class="xr_tl xr_s1" style="left: 340px; top: 127px;">entire animation. You can also just tell Spriter to </span>
  <span class="xr_tl xr_s1" style="left: 340px; top: 145px;">export an image per however many miliseconds </span>
  <span class="xr_tl xr_s1" style="left: 340px; top: 163px;">you&#8217;d like.&nbsp; These are the first 3 options in the </span>
  <span class="xr_tl xr_s1" style="left: 340px; top: 181px;">palette.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/260.jpg" alt="" title="" style="left: 34px; top: 441px; width: 220px; height: 267px;"/>
 <img class="xr_ap" src="index_htm_files/261.jpg" alt="" title="" style="left: 341px; top: 620px; width: 372px; height: 265px;"/>
 <div class="xr_s1" style="position: absolute; left:86px; top:1162px; width:668px; height:266px;">
  <span class="xr_tl xr_s1" style="left: 317px; top: -14px;">4) Using the second part of the export dialogue you </span>
  <span class="xr_tl xr_s1" style="left: 317px; top: 3px;">can decide how your animation will be trimmed. Most </span>
  <span class="xr_tl xr_s1" style="left: 317px; top: 21px;">of the time, You&#8217;ll want to leave it at the default </span>
  <span class="xr_tl xr_s1" style="left: 317px; top: 39px;">settings, as its sure to not accidentall clip (remove) </span>
  <span class="xr_tl xr_s1" style="left: 317px; top: 57px;">parts of any of the frame.&nbsp; But, if you want more </span>
  <span class="xr_tl xr_s1" style="left: 317px; top: 74px;">specific controll, or specifically want to crop the </span>
  <span class="xr_tl xr_s1" style="left: 317px; top: 92px;">animation, then you can use the settings in this part of </span>
  <span class="xr_tl xr_s1" style="left: 317px; top: 110px;">the palette to specify exact cropping coordinates. Just </span>
  <span class="xr_tl xr_s1" style="left: 317px; top: 127px;">click the grey rectangle that says &#8220;trim rect to </span>
  <span class="xr_tl xr_s1" style="left: 317px; top: 145px;">animation&#8221; and the other options will appear.&nbsp; </span>
  <span class="xr_tl xr_s1" style="left: 317px; top: 163px;">Choosing any of them will reveal additional settings </span>
  <span class="xr_tl xr_s1" style="left: 317px; top: 181px;">specific to that cropping option.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:18px; top:1428px; width:709px; height:96px;">
  <span class="xr_tl xr_s1" style="top: -14px;">5) You can use the bottom section of the palette to decide at what scale you&#8217;d like to export your animation.&nbsp; </span>
  <span class="xr_tl xr_s1" style="top: 3px;">By default it will be set to 100 percent. (actual size).&nbsp; Just use these settigns to determind what size you&#8217;d like </span>
  <span class="xr_tl xr_s1" style="top: 21px;">the animation exported to.&nbsp; Once you&#8217;ve decide and you&#8217;ve made sure all the settings from the previous steps </span>
  <span class="xr_tl xr_s1" style="top: 39px;">are correct, just click OK and the exporting will commence into the folder you had selected.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/262.jpg" alt="" title="" style="left: 17px; top: 903px; width: 378px; height: 491px;"/>
 <div class="xr_s1" style="position: absolute; left:18px; top:1529px; width:709px; height:96px;">
  <span class="xr_tl xr_s1" style="top: -14px;">6) Notice the option checkbox called &#8220;batch export&#8221; at the top left of the export dialogue window.&nbsp; If you </span>
  <span class="xr_tl xr_s1" style="top: 3px;">check this option, you&#8217;ll be able to choose to export all or any number of specific animations all at once, all </span>
  <span class="xr_tl xr_s1" style="top: 21px;">with identical settings.&nbsp; This can save you tons of time and assure all animations are cropped (and trimmed) to </span>
  <span class="xr_tl xr_s1" style="top: 39px;">the same exact dimentions etc.</span>
 </div>
 <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden;">
 <a href="" onclick="return(false);" onmousedown="xr_ppir(this);">
 </a>
 </div>
 <a href="adding%20variables%20to%20an%20animation.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/200.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <div id="xr_xd0"></div>
</div>
</div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript">xr_aeh()</script><![endif]--><!--[if !IE]>--><script type="text/javascript">xr_htm();window.addEventListener('load', xr_aeh, false);</script><!--<![endif]-->
</body>
</html>